<template>
	<view class="x-wrapper">
		<view class="x-main-content">
			<u-navbar title="订单详情" bgColor="#ffffff" :fixed="true" leftIcon="arrow-left" leftIconColor="#333"
				leftIconSize="42rpx" placeholder @leftClick="leftClick">
			</u-navbar>
			<view class="detailTop">
				<text style="font-size: 40rpx;">{{orderData.orderStatus | filterStatus}}</text>
				<image src="../../static/order/unpay.png" mode=""></image>
			</view>
			<scroll-view scroll-y style="padding-bottom: 126rpx;">
				<view class="form_content">
					<view style="padding: 30rpx 30rpx 0">
						<span
							style="display: inline-block;height: 20rpx;border-bottom: 20rpx solid  #9bb7ff ;color: #333;font-weight: 600;">预约信息</span>
						<u-form :model="form" :rules="rules" ref="uForm" :label-style="labelStyle" errorType="toast">
							<u-form-item label="就诊医院" prop="hospital" borderBottom>
								<u-input v-model="orderData.hospitalName" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
							<u-form-item label="就诊人" prop="people" borderBottom>
								<u-input v-model="orderData.contactName" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
							<u-form-item label="就诊人电话" prop="phone" borderBottom>
								<u-input v-model="orderData.contactPhone" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
							<u-form-item label="服务时间" prop="time" borderBottom>
								<u-input v-model="orderData.appointmentDate" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
							<u-form-item label="特殊需求" prop="special">
								<u-input v-model="orderData.specialNeeds" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
						</u-form>
					</view>
				</view>
				<view class="box2">
					<view style="padding: 30rpx 30rpx 0">
						<span
							style="display: inline-block;height: 20rpx;border-bottom: 20rpx solid  #9bb7ff ;color: #333;font-weight: 600;">订单信息</span>

						<u-form :model="form2" :rules="rules2" ref="uForm" :label-style="labelStyle" errorType="toast">
							<u-form-item label="服务类型" prop="type" borderBottom>
								<u-input v-model="orderData.serviceName" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
							<u-form-item label="订单编号" prop="number" borderBottom>
								<u-input v-model="orderData.serviceOrderSn" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
							<u-form-item label="下单时间" prop="buyTime" borderBottom>
								<u-input v-model="orderData.createTime" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
							<u-form-item label="金额" prop="money" borderBottom>
								<u-input v-model="orderData.amount" disabled placeholderClass="plaClass"
									disabledColor="#ffffff" border="none"></u-input>
							</u-form-item>
						</u-form>
					</view>
				</view>
			</scroll-view>
<!--			<view class="footer">-->
<!--				<view class="footer-left">-->
<!--					<text class="text1">实付款：<text class="text2">¥ {{orderData.amount}}</text></text>-->
<!--				</view>-->
<!--				<view class="footer-right">-->
<!--					<u-button text="去支付" :hairline="false" :customStyle="commonBtnStyle" color="#386FFF"></u-button>-->
<!--				</view>-->
<!--			</view>-->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {},
				rules2: {},
				labelStyle: {
					color: '#6F7DA2',
					fontSize: '14px',
					textAlign: 'left',
					fontWeight: '300',
					letterSpacing: '2px',
					fontFamily: 'PingFangSC-Light, PingFang SC',
				},
				orderData: '',
				requestCode: ''
			}
		},
		//获取路由传递的信息
		onLoad(e) {
			if (e.data) {
				this.requestCode = e.data
				if (this.requestCode) {
					this.getOrder()
				}
				// let ctx = JSON.parse(decodeURIComponent(e.data))
				// console.log('ctx',ctx)
				// if (isNaN(ctx)) {
				// 	this.orderData = ctx
				// } else {
				// 	this.requestCode = ctx
				// 	if (this.requestCode) {
				// 		this.getOrder()
				// 	}
				// }
			}
		},
		methods: {
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getOrder() {
				let res = await this.$request(`/api/serviceOrder/detail/${this.requestCode}`, '', 'GET')
				this.orderData = res.data.data
				console.log(this.orderData)
			}
		},
		filters:{
			filterStatus(val){
				switch (Number(val)) {
					case 1:
						return '待服务'
					case 2:
						return '待支付'
					case 3:
						return '待接单'
					case 4:
						return '服务中'
					case 5:
						return '已完成'
					case 6:
						return '已取消'
					case 7:
						return '待签到'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detailTop {
		padding: 0 62rpx;
		// height: 188rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #E1E6EE;

		text {
			font-size: 44rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			letter-spacing: 2px;
		}

		image {
			width: 150rpx;
			height: 118rpx;

		}
	}

	.form_content {
		margin-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		height: auto;
		background: #ffffff;
		border-radius: 30rpx;

	}

	.box2 {
		margin: 20rpx;
		background: #ffffff;
		border-radius: 30rpx;

	}

	.bt {
		padding: 20rpx 20rpx 20rpx 0;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid rgb(214, 215, 217);

		image {
			width: 152rpx;
			height: 50rpx;
		}

		.btn-txt {
			font-size: 26rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #777777;
			letter-spacing: 1px;
			margin-top: 8rpx;
			margin-bottom: 44rpx;
		}
	}

	.plaClass {
		text-align: right;
		font-size: 28rpx;
		font-family: PingFangSC-Light, PingFang SC;
		font-weight: 300;
		color: #6F7DA2;
		letter-spacing: 1px;
		margin-right: 10px;
	}

	/deep/ .u-form-item__body__left {
		width: 20vh !important;
		margin-left: 10px;
	}

	/deep/.u-form-item__body {
		padding: 15px 0 !important;
	}

	/deep/.uni-input-input {
		text-align: end;
	}

	.footer {
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 25rpx;
		z-index: 9;

		.text1 {
			font-size: 26rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #4D536A;
			line-height: 24px;
		}

		.text2 {
			font-size: 30rpx;
			font-family: HelveticaNeue-Medium, HelveticaNeue;
			font-weight: 500;
			color: #FF5059;
			line-height: 30px;
			letter-spacing: 1px;
		}

		/deep/.u-button {
			width: 179rpx;
			height: 70rpx !important;
		}
	}
</style>